/**
 * 作用：指示 webpack 干那些活（当运行webpack指令时，会加载里面的配置）
 * 
 * 因为所有的构建工具，都是基于nodejs平台运行的，所以模块化默认采用commonjs。
 **/

//  resole 是用来拼接绝对路径的方法
const {
    resolve
} = require("path")

//  webpack 配置
module.exports = {
    // 入口起点
    entry: "./src/index.js",
    // 输出
    output: {
        // 输出文件名
        filename: "main.js",
        // 输出路径
        // __dirname:表示当前文件（webpack.config.js）的目录绝对路径，第二个参数为根目录下的文件夹。
        path: resolve(__dirname, "build")
    },
    // loader的配置
    module: {
        rules: [
            // 详细loader配置

            // 配置css
            {
                test: /\.css$/,
                use: [ // use数组中loader执行顺序从右到左，从下到上 依次进行。
                    // 创建style标签，将js中的样式资源插入进入，添加到head中使之生效
                    'style-loader',
                    // 将css文件变成commonjs模块加载js中，里面内容是样式字符串。
                    'css-loader'
                ]
            }, {
                test: /\.less$/,
                use: [ // use数组中loader执行顺序从右到左，从下到上 依次进行。
                    // 创建style标签，将js中的样式资源插入进入，添加到head中使之生效
                    'style-loader',
                    // 将css文件变成commonjs模块加载js中，里面内容是样式字符串。
                    'css-loader',
                    // 将less文件编译成css文件
                    'less-loader'
                ]
            }
        ]
    },
    // plugins的配置
    plugins: [
        // 详细plugins配置
    ],
    // 模式
    mode: "development", // 开发模式
    // mode: "production" // 生产模式
}